<!--
 * @Author: gyc
 * @Date: 2020-06-17 10:28:23
 * @LastEditTime: 2020-07-08 16:13:29
 * @Description: Nuxt测试版
--> 
<template>
  <div class="movie-box">
    <nuxt-link to="movieInfo">
      <img src="/img/chuangzaoying.webp" />
      <div class="movie-box-mask">
        <p>《创造营2020》是由腾讯视频出品的能量女团成长综艺，致力于充分展现女孩们自信勇敢、拼搏向上的元气能量和青春态度。</p>
      </div>
    </nuxt-link>
  </div>
</template>

<script>
export default {
  name: "movieBox"
};
</script>

<style lang="scss" scoped>
.movie-box {
  position: relative;
  width: 120px;
  min-width: 120px;
  height: 170px;
  cursor: pointer;
  // border-radius: 8px;
  overflow: hidden;
  img {
    transition: all 0.4s ease-in-out;
  }
  &:hover img {
    transform: scale(1.2);
  }
  &:hover .movie-box-mask {
    opacity: 1;
  }
  img {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .movie-box-mask {
    position: absolute;
    display: flex;
    // justify-content: center;
    // align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(27, 27, 27, 0.5);
    opacity: 0;
    transition: all 0.4s ease-in-out;
    color: white;
    p {
      margin: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 7;
      -webkit-box-orient: vertical;
    }
  }
}
</style>